<template>
  <div class="JS_container">
    <Card class="card">
      <div class="searchTmInput">
        <Input
          search
          enter-button="立即查询"
          autofocus
          v-model="query_key"
          ref="oop"
          size="large"
          :placeholder="placeholder"
          @on-search="searchTms"
          @on-blur="reg_people_show=false"
          @keyup.native.38="selectItem(-1)"
          @keyup.native.40="selectItem(1)"
        ></Input>
        <SearchList
          v-show="reg_people_show || reg_people_show2"
          ref="scrollU"
          @mouseleave.native="reg_people_show2=false"
          @keyup.enter="onEnter"
          @select_name="selectName"
          :reg_people_names="reg_people_names"
          :type="type"
          :itemNum="itemNum"
          :state="1"
          :category="1"
        ></SearchList>

      </div>
      <div class="searchType tongYc" style="margin: 20px 0;">
        
        <Button
          :type="type==3?'primary':'default'"
          class="wcV otoqQ"
          @click="selectType(3)"
        >申请人查询</Button>
        <Button
          :type="type==2?'primary':'default'"
          class="wcV otoqQ"
          @click="selectType(2)"
        >申请/注册号查询</Button>
        <Button
          :type="type==1?'primary':'default'"
          class="wcV otoqQ"
          @click="selectType(1)"
        >商标名称查询</Button>
        <Button
          :type="type==4?'primary':'default'"
          class="wcV "
          @click="selectType(4)"
        >代理机构查询</Button>
      </div>

      <div v-show="!loading && $app.judgeData(result)">
        <div class="search-top" v-if="type==1 || type ==2">
          服务猫为您找到相关结果
          <i>{{total}}</i>个，当前第
          <i>{{page}}</i> 页
        </div>
        <div class="search-top" v-else>
          服务猫为您找到相关结果
          <i>{{total}}</i>个,申请中:
          <i>{{apply_count}}</i>个,初审中:
          <i>{{inspe_count}}</i>个,已注册:
          <i>{{reg_count}}</i>个,其它:
          <i>{{other_count}}</i>个,当前第
          <i>{{page}}</i> 页
        </div>

        <ul class="search-list">
          <ComList :result="result"/>
        </ul>

        <div class="marginT10 ">
          <Page
            :total="total>max_total?max_total:total"
            show-total
            show-sizer
            show-elevator
            size="small"
            :page-size="pageSize"
            :page-size-opts="$app.pageAll.pageSizeOpts"
            :current="page"
            @on-change="loadMore"
            @on-page-size-change="changePageSize"
          ></Page>
        </div>
      </div>

      <div class="f_24 lineH2 cCCC textLeft" v-show="!loading && !$app.judgeData(result)">暂无结果</div>
      <div class="f_24 lineH2 cCCC textLeft" v-show="loading">正在加载...</div>
      
    </Card>
  </div>
</template>

<style lang="less" scoped>
@import "../less/tongyc.less";
</style>

<script>
import SearchList from "../_currentTable/searchList";
import ComList from "./common/comList";
export default {
  name: "Trademarklists",
  components: {ComList,SearchList},
  data() {
    let {
      $route: {
        query: { query_key, type }
      }
    } = this;

    let data={
      query_key,
      type,
      result: [], // 搜索结果
      apply_count: 0, // 申请数量
      inspe_count: 0, // 初审数量
      reg_count: 0, // 已注册数量
      other_count: 0, // 其他未知状态数量
      page: 1, // 当前页数
      pageSize: $app.pageAll.pageSize, // 默认数据返回条数

      max_total:0,//最大条数
      total: 0, // 所有数据条数
      total_page: 0, // 所有页面
      reg_people_names: [], // 模糊查询临时列表
      reg_people_show: false, //失去焦点
      reg_people_show2: false, //移出界面
      itemNum: 0, // 选择
      placeholder: "" //
    };
    let tool={
      loading: true, //正在加载中
    };

    return Object.assign(data,tool);
  },
  // 挂载
  mounted() {
    
    let {
      $route: {
        query: { query_key, type }
      }
    } = this;
    this.getTmList();
    this.selectType(type,true);
  },
  // 绑定方法
  methods: {
    //判断输入框不能为空
    query_key_Had(callBack){
      let {
        query_key
      }=this;

      if($app.judgeData($app.delSpace(query_key))){
        callBack()
      }else{
        this.$Message.error({content:this.placeholder});
        this.$refs["oop"].focus();
        this.query_key='';
      }

    },
    // 切换搜索 buEr:true首次进来
    selectType(type,buEr) {
      if (type == 1) {
        this.placeholder = "请输入商标名称";
      } else if (type == 2) {
        this.placeholder = "请输入商标申请/注册号";
      } else if (type == 3) {
        this.placeholder = "请输入申请人名称";
      } else if (type == 4) {
        this.placeholder = "请输入代理机构名称";
      }
      this.type = type;

      !buEr && (this.query_key = "");
    },
    // 搜索
    searchTms() {
      let {
        type,
        reg_people_show,
        reg_people_show2,
        itemNum
      } = this;
      this.page = 1;


      if (reg_people_show && reg_people_show2) {
        if (itemNum == 0) {
          return;
        }
        this.selectName(itemNum - 1);
      } else {
        if (type == 3) {
          this.queryRegPeople();//申请人查询
        } else if (type == 4) {
          this.queryAgent();//代理机构查询
        } else {

          this.query_key_Had(()=>{
            this.getTmList();//获取数据
          });

        }
      }
    },
    // 第一次获取数据
    getTmList() {
      let {
        $route: {
          query: {
            query_key,
            type:typeT
          }
        }
      } = this;

      let {
        type,
        page,
        pageSize
      } = this;

      let query_go='';
      if(type==typeT && this.query_key==query_key){
        this.query_key=query_key;
        query_go=query_key;
      }else{
        query_go=this.query_key;
      }

      if(!$app.judgeData($app.delSpace(query_go))){
        this.query_key=query_key;
        query_go=query_key;
      }
      
      
      this.result=[];
      this.loading=true;
      
      $ajax.lb_getTmQuery({ 
        query_key:query_go, type, page, pageSize 
      }, resData => {

        this.loading=false;
        this.result = resData.list;

        
        this.apply_count = resData.apply_count||0;// 申请数量
        this.inspe_count = resData.inspe_count||0;// 初审数量
        this.reg_count = resData.reg_count||0;// 已注册数量
        this.other_count = resData.other_count||0;// 其他未知状态数量

        this.max_total = resData.max_total;
        this.total=resData.total;
        this.total_page = resData.total_page;


        //替换地址栏
        this.$router.replace({
          name: 'Trademarklists',
          query: {
            query_key:query_go,
            type
          }
        });
      },()=>{
        console.log('搜索次数用完')
      });


    },
    // 模糊查询申请人
    queryRegPeople() {
      
      this.query_key_Had(()=>{
        let{
          query_key:reg_people_name
        }=this;
        $ajax.lb_getQueryRegPeople({reg_people_name}, resData => {
          this.reg_people_show = true;
          this.reg_people_show2 = true;
          this.reg_people_names = resData;
        },()=>{
          this.$refs["oop"].focus();
        });
      });
    },
    // 模糊查询代理机构
    queryAgent() {
      this.query_key_Had(()=>{
        let{
          query_key:agent_name
        }=this;
        $ajax.lb_getQueryAgent({ agent_name }, resData => {
          this.reg_people_show = true;
          this.reg_people_show2 = true;
          this.reg_people_names = resData;
        },()=>{
          this.$refs["oop"].focus();
        });
      });
    },

    // 选择模糊名字
    selectName(index) {
      this.reg_people_show = false;
      this.reg_people_show2 = false;
      this.itemNum = 0;
      this.query_key = this.reg_people_names[index];
      this.getTmList();
    },
    // 上下选择
    selectItem(num) {
      let { itemNum, reg_people_names } = this;
      if (itemNum <= 0) {
        if (num > 0) {
          this.itemNum += num;
        } else {
          this.itemNum = 0;
        }
      } else if (itemNum >= reg_people_names.length && num > 0) {
        this.itemNum = reg_people_names.length;
      } else {
        this.itemNum += num;
      }
    },
    // 加载更多
    loadMore(page) {
      this.page = page;
      this.getTmList();
    },
    // 数据返回条
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTmList();
    },
  },
  //计算数学
  computed: {
    // placeholder() {
    //     const type = this.type;
    //     let p = '';
    //     switch (type) {
    //         case 1:
    //             p = '请输入商标名称';
    //             break;
    //         case 2:
    //             p = '请输入注册号';
    //             break;
    //         case 3:
    //             p = '请输入申请人';
    //             break;
    //         case 4:
    //             p = "请输入代理机构名称";
    //             break;
    //     }
    //     return p;
    // }
  },
  // 监视
  watch: {
    type(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.query_key = "";
      }
    },
    query_key(newVal, oldVal) {
      this.reg_people_show2 = false;
    }
  }
};
</script>
